<!--
    This Source Code Form is subject to the terms of the Mozilla Public
    License, v. 2.0. If a copy of the MPL was not distributed with this
    file, You can obtain one at http://mozilla.org/MPL/2.0/.
-->

<!--
    Copyright (c) 2014, Joyent, Inc.
-->

<div class="page-header">
  <h1>Packages
        {{#role "operators"}}
        <div class="actions">
            <button class="btn btn-info create">
                <i class="fa fa-plus"></i> Create Package
            </button>
        </div>
        {{/role}}
    </h1>
</div>

<div class="row">
    <div id="package-search" class="col-sm-3">
      <form role="form">
        <div class="form-group">
            <label>Billing ID</label>
            <input type="text" name="billing_id" class="form-control input-sm" placeholder="Quick Find Billing ID">
        </div>

        <div class="form-group">
            <label>State</label>
            <select class="form-control" name="active">
                <option value="">any</option>
                <option value="true">active</option>
                <option value="false">inactive</option>
            </select>
        </div>

        <div class="form-group">
            <label>Package Name</label>
            <input type="text" class="form-control"  placeholder="Package Name" name="name"></input>
        </div>

        <div class="form-group">
            <label>Package Group</label>
            <input type="text" class="form-control"  placeholder="Package Group" name="group"></input>
        </div>

        <div class="form-group">
            <label>Owner UUID</label>
            <input class="form-control" type="text" placeholder="Search by login, uuid, or email" name="owner_uuids"></input>
        </div>

        <div class="form-group">
            <label>Traits</label>
            <input class="form-control" type="text" placeholder="<key>: <value> or just <key>" name="traits">
        </div>


        <div class="form-group">
            <label>RAM</label>
            <div class="row">
                <div class="col-sm-3" style="padding-right:0">
                    <select class="form-control" name="ram-op">
                        <option value="=">=</option>
                        <option value=">=">&gt;=</option>
                        <option value="<=">&lt;=</option>
                    </select>
                </div>
                <div class="col-sm-9" style="padding-left:0;">
                    <div class="input-group">
                        <input class="form-control" type="text" name="ram-value"></input>
                        <span class="input-group-addon">MB</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label>Disk Quota</label>
            <div class="row">
                <div class="col-sm-3" style="padding-right:0">
                    <select class="form-control" name="disk-op">
                        <option value="=">=</option>
                        <option value=">=">&gt;=</option>
                        <option value="<=">&lt;=</option>
                    </select>
                </div>
                <div class="col-sm-9" style="padding-left:0;">
                    <div class="input-group">
                        <input class="form-control" type="text" name="disk-value"></input>
                        <span class="input-group-addon">GB</span>
                    </div>
                </div>
            </div>
        </div>

        <button class="search btn btn-primary btn-block"><i class="fa fa-search"></i> SEARCH</button>
      </form>
    </div>

    <div id="list" class="col-sm-9"></div>
  </div>

</div>
